 <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商
</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<style type="text/css">
	body,div,ul,p,img{
		margin:0;
		padding: 0;
		border:0;
		font-size:14px;
	}

		#kuang{
			width: 900px;
			height: 850px;
			background-color: white;                                     
			margin: auto;
			border: 1px solid gray;
			border-radius: 10px;
			position: relative;    
			/*相对定位*/

		}
		#email{
			width: 413px;
			height: 35px;
			background-color: #f0f0f0;
			border-radius: 5px;
			margin-left: 100px;
			margin-top: 50px;
		}
		#email li{
			list-style: none;
			/*清除样式*/
			float: left;
			/*把字体向左排列*/
			border-right: 1px solid gray;
			width: 135px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			cursor: pointer;
			/* 光标*/
		}
		#box{
			width: 550px;
			height: 600px;
			padding-left: 30px;
			padding-top: 30px;
		}
		 #box span{
			color: red;
		}
	#kuang input{
		width: 400px;
		height: 28px;
		margin: 8px;
	}
	#box p{
		color: gray;
		font-size: 12px;
		margin-left: 85px;
		margin-bottom:15px;

	}
	.bianlan{
		background-color: #2D75BF;
		color: white;
		font-weight: bold;
		border-radius: 10px;
		/*设置圆角*/

		
	}
	.header{
		width: 900px;
		height: 81px;
		margin: 0 auto;
		text-align: left;
		position: relative;
		/*相对定位*/
	}
.header .backg {
	width: 664px;
	height: 27px;
	position: absolute;
	left: 0;
	top:30px;
	background-image:  url(images/glb_v2.png);
}
.header .links{
	width: 200px;
	position: absolute;
	right: 0;
	top: 34px;
	text-align: right;
	color: #999
}
.header .links a{
	font-size: 12px;
	margin: 0 5px;
	color: #039;
	text-decoration: none;
	/*清除下划线*/
}
.header .links a:hover{
	text-decoration: underline;
	/*下划线*/
}
.guanggaoimg{
	position: absolute;
	/*绝对定位*/
	top: 200px;
	right: 40px;

}
.bg{
	background-color: #F5F5F5;
	width: 350px;
	height: 800px;
	position: absolute;
	right: 0;
	top: 48px;
	border-bottom-right-radius: 10px;
}
.Btns{
	color:#003399;
	text-decoration:none;
}
.Btns:hover{
	text-decoration: underline;
}
#Code{
	position: absolute;
	top: 450px;
	right: 400px;
}
.itl{
	position: absolute;
	top: 428px;
	left: 110px;
}
.flag{
	background-image: url("images/triangle.gif");
	background-repeat: no-repeat;
	background-position: 25px center;
	width: 100%;
	height: 100%;
	float: left;
}
.flag em{
	background-image: url("images/flags.gif");
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 5px;
	margin-top: -5px;
	display: inline-block;
	width: 16px;
	height: 11px;
	overflow: hidden;
}
#liebiao{
	width: 498px;
	height: 300px;
	border: 1px solid gray;
	top:446px;
	left:102px;
	position: absolute;
	background-color: white;
	padding: 8px;
	display: none;

}
.flag-CN em{
	background-position: 0 -825px;
}
.flag-AL em{
	background-position: 0 -1034px;
}
.flag-DZ em{background-position: 0 -528px;}
#liebiao a{
	display: block;
	height: 24px;
	line-height: 24px;
	text-decoration: none;
	text-align: center;
}
#liebiao a em{
	background-image: url(images/flags.gif);
	width: 16px;
	height: 11px;
	display:block;
	border: 1px solid #ccc;
	float: left; 

}
</style>



</head>
<body>
<header class="header">
<div class="backg"></div>
<div class="links"><a href="#">了解更多</a>|<a href="#">反馈意见</a></div>
</header>
	<div id="kuang">
		<p style="color: white;background-color:#5D8DBE; border-top-left-radius:10px;border-top-right-radius:10px;line-height:45px;font-size: 15px; padding-left: 10px;">欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品</p>
		<ul id="email">
			<li class="bianlan">注册字母</li>
			<li>注册手机号</li>
			<li style="border:none">注册VIP</li>
			<!-- 清除右边距 -->
		</ul>
		<div id="box"><span>*</span>邮箱地址
			<input type="text" style="width: 250px;">@
<select style="width: 100px;height: 30px;">
	<option value="">163.com</option>
	<option value="">126.com</option>
	<option value="">yeah.net</option>
</select>
<p>6~18个字符，可使用字母、数字、下划线，需以字母开头
</p>
<span>*</span>密码
			<input type="text" style="margin-left:39px;">
			<p>6~16个字符，区分发大小写</p>
			<span>*</span>确认密码<input type="text" style="margin-left:14px;">
			<p>请再次填写密码</p>
		
			<span>*</span>手机号码 <input type="text"  value="+86-" style="margin-left:6px;padding-left:35px; font-weight:bold;font-size: 16px;" id="phone">
			<p>请填写正确的手机号</p>
			<span>*</span>验证码 <input type="text"  style="width: 250px;margin-left:27px;" >
			<br>
			<p>请填写图片中的字符，不区分大小写</p>
			<input type="button" value="免费获取验证码" style="width: 250px; height: 30px; font-size: 15px; margin-left: 75px;">
			<a style="color:#003399;font-size:12px;margin-left:25px; cursor:pointer;" onclick="qiehuanimg()">看不清楚？换张图片</a><br>
			<span>*</span>短信验证码<input type="text" >
			<img src="images/call/call0.jpg" alt="" id="Code" onclick="qiehuanimg()">
			<p>请查收手机短信，并填写短信中的验证码</p><br>
			<p><input type="checkbox" style="width: 13px;
			/* 这是一个复选框*/
			height: 13px">同意<a href="#" class="Btns">服务条款</a></strong>和<a href="#" class="Btns">隐私权相关政策</a>
			</p>
			<input type="button" value="立即注册" style="width: 130px; height: 45px; border-radius: 10px; background-color: #5DB348; color:white; margin-left:75px;" >

		</div>
		<div class="bg"><img src="images/phone.gif" class="guanggaoimg"></div>
		<div>
		<div class="itl"><div class="flag                                                          flag-CN"><em>&nbsp;</em></div></div>
			
			
		
	</div>
		<div id="liebiao">
		<a href="#" class="flag-CN"><em> &nbsp;</em>中国 +86</a>
		<a href="#" class="flag-AL"><em>&nbsp;</em>阿尔巴尼亚（Shqiperia) +355</a>
		<a href="#" class="flag-DZ"><em>&nbsp;</em>阿尔及利亚（People's Democratic Republic of Algeria) +213</a>
		</div>
		</div>
	<script>
	var arrEmail=document.getElementById('email')
	var arrli=arrEmail.getElementsByTagName('li')
	var oCode=document.getElementById('Code')
	var num=Math.floor(Math.random()*5);
			oCode.src='images/call/call'+num+'.jpg'
		for (var i = 0; i < arrli.length; i++) {
			arrli[i].onclick=function(){
				for (var i = 0; i < arrli.length; i++) {
				arrli[i].className=""
			}
				this.className="bianlan"
			}
		}
		function qiehuanimg(){
			var num=Math.floor(Math.random()*5);
			oCode.src='images/call/call'+num+'.jpg'
		}
		function select_flag(){

			var links=document.querySelectorAll("#liebiao a");

			for (var i=links.length - 1;i >= 0;i--){
				links[i].addEventListener("click",function(e){
					var target=e.target;//获取点击的a
					  
					var cls=target.className;//获取点击的a的class国旗
						
					var Txt=target.innerHTML;//获取点击的a的文本内容
					var phone=Txt.substr(Txt.indexOf("+"),Txt.length-Txt.indexOf("+"));//过滤
					document.getElementById("phone").setAttribute("value",phone);
					var div=document.querySelector('.flag');
					console.log(div)
					div.className='flag '+cls;

			 
		
				})
			}

				}

			function swithFlag(){
			var flag = document.querySelector('.flag');
			var panel = document.querySelector("#liebiao");
			flag.addEventListener("click",function(e){	                               		
				panel.style.display==="none" ? panel.style.display="block":panel.style.
				display = "none";
			})
		}

		select_flag();
		swithFlag()
		
	</script>
</body>
</html>